<template>
  <div id="basicLayout">
    <a-layout style="min-height: 100vh">
      <a-layout-header class="header">
        <GlobalHeader />
      </a-layout-header>


      <a-layout>
        <div class="sider-wrapper">
          <GlobalSider ref="globalSiderRef" class="sider" />
          <div class="sider-toggle-button" @click="toggleSider">
            <MenuFoldOutlined v-if="!isSiderCollapsed" />
            <MenuUnfoldOutlined v-else />
          </div>
        </div>
        <a-layout-content class="content">
          <router-view />
        </a-layout-content>
      </a-layout>



      <a-layout-footer class="footer">
        <a href="https://gitee.com/zheng-fengnan/online-picture" target="_blank">
          Wait葡萄成熟时
        </a>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<!-- 必须引入组件，上面才能使用！！！ -->
<script setup lang="ts">
import { ref, computed } from 'vue'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
import GlobalHeader from '@/components/GlobalHeader.vue'
import GlobalSider from '@/components/GlobalSider.vue'

const globalSiderRef = ref<InstanceType<typeof GlobalSider> | null>(null)

// 通过 GlobalSider 组件获取侧边栏折叠状态
const isSiderCollapsed = computed(() => {
  if (globalSiderRef.value) {
    return globalSiderRef.value.collapsed
  }
  return true
})

const toggleSider = () => {
  if (globalSiderRef.value) {
    globalSiderRef.value.toggleCollapsed()
  }
}
</script>


<style scoped>
#basicLayout .footer {
  background: #efefef;
  padding: 16px; /* 边款距离 */
  position: fixed; /* 用于将元素固定在浏览器窗口的指定位置，即使页面滚动，该元素也会保持在固定位置。 */
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center; /* 居中 */
}

#basicLayout .content {
  background: linear-gradient(to right, #fefefe, #fff);
  margin-bottom: 28px;
  padding: 20px;
}

#basicLayout .header {
  padding-inline: 20px; /* 设置元素的内边距 */
  margin-bottom: 16px; /* 灰色间距 */
  color: unset;
  background: white;
}
#basicLayout .header {
  margin-bottom: 1px;
}

#basicLayout .content {
  padding: 28px;
}

#basicLayout .sider {
  background: #fff;
  padding-top: 20px;
  border-right: 0.5px solid #eee;
  transition: all 0.3s ease;
}

#basicLayout :deep(.ant-menu-root) {
  border-bottom: none !important;
  border-inline-end: none !important;
}

/* 侧边栏包装器 */
.sider-wrapper {
  position: relative;
  display: flex;
}

/* 侧边栏切换按钮 */
.sider-toggle-button {
  position: absolute;
  top: 6%;
  right: -22px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 3px 0 8px rgba(0, 0, 0, 0.05);
  z-index: 100;
  transition: all 0.3s ease;
}

.sider-toggle-button:hover {
  background: #e6f4ff;
  color: #1677ff;
  transform: translateY(-50%) scale(1.1);
}

.sider-toggle-button .anticon {
  font-size: 20px;
}



</style>
